<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:titletext,liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright" @click="submit">
					<view class="nostrongtext">保存</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="strongtext">
				<text class="titletext textliner">基本信息</text>
			</view>
		</view>
		<view class="mainpadding ffffff">
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">员工姓名</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入员工姓名" v-model="username">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">联系电话</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="number" placeholder="请输入联系电话" v-model="mobile">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">性别</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<u-radio-group v-model="gender" placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="男"
							name="1"></u-radio>
						<u-radio activeColor="#0BBDCB" label="女" name="2"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="inputbox margin_top" @click="showTime(1)">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">生日</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请选择生日" disabled v-model="birthday">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">微信</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入微信号" v-model="wechat_code">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">支付宝账号</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入支付宝账号" v-model="ali_account">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">身份证</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入身份证" v-model="idcard">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">开户行</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入开户行" v-model="open_bank">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">银行账号</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入银行账号" v-model="bank_account">
				</view>
			</view>
			<view class="inputbox margin_top" @click="ckPianQuShow = true">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">片区</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请选择片区" disabled v-model="ckPianQuText">
					<view class="righticon2"></view>
				</view>
			</view>
			<uni-data-picker :localdata="items" placeholder="请选择住址" popup-title="请选择地区" v-model="addressinfo.county"
				@change="bindPickerChange">
				<view class="inputbox margin_top">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">省市区选择</view>
						<view class="bitian">*</view>
					</view>
					<view class="itembox flexbetween">
						<text class="word12" v-if="!area.length">请选择住址</text>
						<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
						<view class="righticon2"></view>
					</view>
				</view>
			</uni-data-picker>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">详细地址</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="getLocation">
					<input type="text" placeholder="请选择详细地址" disabled="" v-model="address">
					<view class="addressicon2"></view>
				</view>
			</view>
			<!-- <view class="inputbox margin_top" @click="ckBuMenShow = true">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">部门</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请选择部门" disabled v-model="ckBuMenText">
					<view class="righticon2"></view>
				</view>
			</view> -->
			<view class="inputbox margin_top" @click="ygZhiWeiShow = true">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">职位</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请选择职位" disabled v-model="ygZhiWeiText">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top" @click="showTime(2)">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">入职日期</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请选择入职日期" v-model="rz_time" disabled="">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">基本工资</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入基本工资" v-model="basic_price">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">员工备注</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入员工备注" v-model="notes">
				</view>
			</view>
		</view>
		<selectCKPianQu :message="{ckPianQuShow:ckPianQuShow}" @ckPianQuSure="ckPianQuSure"></selectCKPianQu>
		<!-- 员工片区 -->
		<selectCKBuMen :message="{ckBuMenShow:ckBuMenShow}" @ckBuMenSure="ckBuMenSure"></selectCKBuMen><!-- 员工部门 -->
		<selectYGZhiWei :message="{ygZhiWeiShow:ygZhiWeiShow}" @ygZhiWeiSure="ygZhiWeiSure"></selectYGZhiWei>
		<!-- 员工职位 -->
		<u-datetime-picker :show="shows" v-model="value1" mode="date" :maxDate="time" :minDate="0"
			@confirm="rzTimeconfirm" @cancel="shows=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				shows: false,
				// 员工片区
				ckPianQuShow: false,
				ckPianQuText: "",
				staff_area_id: "", //员工片区id
				// 员工部门
				ckBuMenShow: false,
				ckBuMenText: "",
				staff_bm_id: "", //员工部门id
				// 员工职位
				ygZhiWeiShow: false,
				ygZhiWeiText: "",
				position_list: "", //员工职位id
				// 省市区选择
				addressinfo: {
					province: "",
					city: "",
					county: ""
				},
				items: [],
				area: [], //收获地
				username: "",
				mobile: "",
				gender: "1",
				birthday: "",
				wechat_code: "",
				ali_account: "",
				idcard: "",
				open_bank: "",
				bank_account: "",
				address: "",
				rz_time: "",
				basic_price: "",
				notes: "",
				longitude: "109.67307",
				latitude: "35.17466",
				titletext: "添加员工档案",
				listid: "",
				time: Number(new Date()),
				value1: Number(new Date()),
				showTimeType: 1, //1选择生日，2选择入职时间
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.items = JSON.parse(JSON.stringify(citys.data))
			if (this.listid) {
				this.titletext = "编辑员工档案"
				this.getdetail()
			}else{
				this.rz_time = httpRequest.returnDate(Number(new Date()))
			}
		},
		methods: {
			showTime(val) {
				this.showTimeType = val
				this.shows = true;
			},
			ckBuMenSure(e) { //员工部门
				if (e) {
					this.ckBuMenText = e.value[0].name
					this.staff_bm_id = e.value[0].id
				}
				this.ckBuMenShow = false
			},
			ckPianQuSure(e) { //员工片区
				if (e) {
					this.ckPianQuText = e.value[0].name
					this.staff_area_id = e.value[0].id
				}
				this.ckPianQuShow = false
			},
			ygZhiWeiSure(e) { //员工职位
				if (e) {
					this.ygZhiWeiText = e.name
					this.position_list = e.id
				}
				this.ygZhiWeiShow = false
			},
			getLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称:' + res.longitude);
						console.log('位置名称:' + res.latitude);
						console.log('详细地址:' + res.address);
						// _this.address = res.address.replace(/.+?(省|市|自治区|自治州|县|区)/g, '');
						_this.longitude = res.longitude
						_this.latitude = res.latitude
						_this.address = res.address
					}
				})
			},
			// 获取详情数据
			getdetail() {
				httpRequest.request('/dhtapi/user/staffDetail', 'POST', {
					id: this.listid
				}, false, false, true).then(res => {
					let data = res.data
					this.username = data.username
					this.mobile = data.mobile
					this.gender = data.gender.toString()
					this.birthday = data.birthday
					this.wechat_code = data.wechat_code
					this.ali_account = data.ali_account
					this.idcard = data.idcard
					this.open_bank = data.open_bank
					this.bank_account = data.bank_account
					this.address = data.address
					this.rz_time = this.date(data.rz_time * 1000)
					this.basic_price = data.basic_price
					this.notes = data.notes
					this.longitude = data.longitude
					this.latitude = data.latitude
					// this.staff_bm_id = data.staff_bm_id
					// this.ckBuMenText = data.staffbm.name
					this.position_list = data.position_list
					this.ygZhiWeiText = data.position_list_text
					this.staff_area_id = data.staff_area_id
					this.ckPianQuText = data.staffarea.name
					let cityinfo = data.cityinfo.split("/")
					this.area = [cityinfo[0], cityinfo[1], cityinfo[2]];
					this.addressinfo = {
						province: data.province_id,
						city: data.city_id,
						county: data.area_id
					}
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.addressinfo.province = area[0].value;
				this.addressinfo.city = area[1].value;
				this.addressinfo.county = area[2].value;
			},
			//验证身份证
			checkidcard(num) {
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (reg.test(num) === false) {
					return false
				} else {
					return true
				}
			},
			//验证手机号
			checkphone(num) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(num);
				return a;
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			rzTimeconfirm(e) {
				if (this.showTimeType == 1) {
					this.birthday = this.date(e.value);
				} else {
					this.rz_time = this.date(e.value);
				}
				this.shows = false;
			},
			submit() {
				let _this = this;
				if (_this.username == '') {
					httpRequest.toast('请输入员工姓名');
					return false;
				}
				if (_this.mobile == '') {
					httpRequest.toast('请输入员工电话')
					return false;
				}
				if (!_this.checkphone(_this.mobile) && _this.mobile != '') {
					httpRequest.toast('电话输入有误')
					return false;
				}
				if (_this.birthday == '') {
					httpRequest.toast('请选择员工生日')
					return false;
				}
				if (_this.idcard == '') {
					httpRequest.toast('请输入员工身份证号码')
					return false;
				}
				if (!_this.checkidcard(_this.idcard) && _this.idcard != '') {
					httpRequest.toast('身份证号码输入有误')
					return false;
				}
				if (_this.staff_area_id == '') {
					httpRequest.toast('请选择片区')
					return false;
				}
				if (_this.addressinfo.province == '') {
					httpRequest.toast('请选择省市区地址')
					return false;
				}
				if (_this.address == '') {
					httpRequest.toast('请选择详细地址')
					return false;
				}
				// if (_this.staff_bm_id == '') {
				// 	httpRequest.toast('请选择部门')
				// 	return false;
				// }
				if (_this.position_list == '') {
					httpRequest.toast('请选择职位')
					return false;
				}
				if (_this.rz_time == '') {
					httpRequest.toast('请选择入职时间')
					return false;
				}
				if (_this.basic_price == '') {
					httpRequest.toast('请输入基本工资')
					return false;
				}
				let data = {
					username: _this.username, //员工姓名
					mobile: _this.mobile, //员工电话
					gender: this.gender, //性别
					birthday: this.birthday, //生日
					wechat_code: this.wechat_code,
					ali_account: this.ali_account,
					open_bank: this.open_bank,
					bank_account: this.bank_account,
					idcard: this.idcard, //身份证号
					position_list: this.position_list, //职位
					staff_area_id: this.staff_area_id, //片区
					province_id: this.addressinfo.province, //省
					city_id: this.addressinfo.city, //市
					area_id: this.addressinfo.county, //区
					address: this.address, //详细地址
					// staff_bm_id: this.staff_bm_id, //部门
					rz_time: this.rz_time,
					basic_price: this.basic_price,
					notes: this.notes,
					longitude: this.longitude,
					latitude: this.latitude,
					id: this.listid
				}
				let url = ""
				if (!this.listid) {
					// 新增
					delete data.id
					url = '/dhtapi/user/addStaff'
				} else {
					// 编辑
					url = '/dhtapi/user/editStaff'
				}
				httpRequest.request(url, 'POST', data).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex1 {
		flex: 3;
	}

	.inputbox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.strongtext {
		line-height: 42rpx;
	}

	.child {
		padding: 30rpx 0;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
	}

	.last {
		border-top: 2rpx solid #999;
	}

	// 用户信息
	.userimg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		// margin-right: 30rpx;
		position: relative;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.boy {
		position: absolute;
		bottom: -8rpx;
		left: 50%;
		transform: translate(-50%, 0%);
		width: 16rpx;
		height: 16rpx;
		background-image: url("@/static/image/news/boy.png");
		background-size: 100% 100%;
	}

	.girl {
		position: absolute;
		bottom: -8rpx;
		left: 50%;
		transform: translate(-50%, 0%);
		width: 16rpx;
		height: 16rpx;
		background-image: url("@/static/image/news/girl.png");
		background-size: 100% 100%;
	}
</style>